<template>
  <div class="main-container">
    <div class="left_container">
      <div class="search_container">
        <div class="search_item">
          <div class="name">产品编码</div>
          <div class="input"><el-input v-model="pageData.code" clearable @clear="getList" /></div>
        </div>
        <div class="search_item">
          <div class="name">产品名称</div>
          <div class="input"><el-input v-model="pageData.name" clearable @clear="getList" /></div>
        </div>
        <div class="search_item">
          <div class="button"><el-button type="search" @click.stop="getList">搜索</el-button></div>
        </div>
        <div class="search_item">

          <div class="name">产品类型</div>
          <div class="input">
            <DictSelect :band-value.sync="pageData.typeId" dict-type="productType" />
          </div>
        </div>
        <div class="search_item">
          <div class="name">产品规格</div>
          <div class="input"><el-input v-model="pageData.model" clearable @clear="getList" /></div>
        </div>
        <div class="search_item">
          <div class="name">销售价格</div>
          <div class="input"><el-input v-model="pageData.salePrice" clearable @clear="getList" /></div>
        </div>
      </div>
      <div ref="middle_container" class="middle_container">
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          :height="tableHeight"
          style="width: 99.9%"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column
            type="selection"
            width="50"
          />
          <el-table-column
            prop="code"
            label="产品编码"
          />
          <el-table-column
            prop="name"
            label="产品名称"
          />
          <el-table-column
            prop="type"
            label="产品类型"
          />
          <el-table-column
            prop="model"
            label="产品规格"
          />
          <el-table-column
            prop="unit"
            label="产品单位"
          />
          <el-table-column
            prop="salePrice"
            label="销售价格"
          />
          <el-table-column
            prop="costPrice"
            label="成本价格"
          />
          <el-table-column
            prop="introduction"
            label="产品简介"
          />
          <infinite-loading
            ref="infiniteLoading"
            slot="append"
            force-use-infinite-wrapper=".el-table__body-wrapper"
            @infinite="loadNext"
          />
        </el-table>
      </div>
      <div class="button_container">
        <el-button style="width: 50%" type="add" @click.stop="add">新增</el-button>
        <RemoveButton style="width: 50%" :page="this" />
        <!-- <ImportButton style="width: 25%" :page="this" />
        <ExportButton style="width: 25%" :page="this" /> -->
      </div>
    </div>
    <div class="right_container">
      <div class="header_container">
        编辑产品
      </div>
      <div class="img_container">
        <FileUpload :is-edit="isEdit" :url.sync="addData.picUrl" :file-name.sync="addData.picName" />
      </div>
      <div class="add_container">
        <div class="add_item">
          <div class="name"><label class="bitian">*</label>产品编码</div>
          <div v-if="isEdit" class="input">
            <RuleCodeDiv :band-value.sync="addData.code" table-name="sales_product" column-name="code" />
          </div>
          <div v-else class="show">{{ addData.code }}</div>
        </div>
        <div class="add_item">
          <div class="name"><label class="bitian">*</label>产品名称</div>
          <div v-if="isEdit" class="input"><el-input v-model="addData.name" clearable placeholder="请填写" /></div>
          <div v-else class="show">{{ addData.name }}</div>
        </div>

        <div class="add_item">
          <div class="name"><label class="bitian">*</label>产品类型</div>
          <div v-if="isEdit" class="input">
            <div class="input">
              <DictSelect :band-value.sync="addData.typeId" dict-type="productType" />
            </div>
            <!-- <el-select v-model="addData.type" clearable>
              <el-option
                v-for="item in productTypeOptions"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              />
            </el-select> -->
          </div>
          <div v-else class="show">{{ addData.type }}</div>
        </div>
        <div class="add_item">
          <div class="name">产品规格</div>
          <div v-if="isEdit" class="input"><el-input v-model="addData.model" clearable placeholder="请填写" /></div>
          <div v-else class="show">{{ addData.model }}</div>
        </div>
        <div class="add_item">
          <div class="name">产品单位</div>
          <div v-if="isEdit" class="input"><el-input v-model="addData.unit" clearable placeholder="请填写" /></div>
          <div v-else class="show">{{ addData.unit }}</div>
        </div>
        <div class="add_item">
          <div class="name">销售价格</div>
          <div v-if="isEdit" class="input"><el-input v-model="addData.salePrice" clearable placeholder="请填写" /></div>
          <div v-else class="show">{{ addData.salePrice }}</div>
        </div>
        <div class="add_item">
          <div class="name">成本价格</div>
          <div v-if="isEdit" class="input"><el-input v-model="addData.costPrice" clearable placeholder="请填写" /></div>
          <div v-else class="show">{{ addData.costPrice }}</div>
        </div>
        <div class="add_item">
          <div class="name">产品简介</div>
          <div v-if="isEdit" class="textarea"><el-input v-model="addData.introduction" clearable placeholder="请填写" type="textarea" :rows="3" /></div>
          <div v-else class="show">{{ addData.introduction }}</div>
        </div>
      </div>
      <div class="button_container">
        <el-button v-if="isEdit" type="save" @click.stop="save">保存</el-button>
        <el-button v-else type="edit" @click.stop="edit">编辑</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { list, add, edit, remove, getInfo } from '@/api/sale/productModeling'
// import { list as list2 } from '@/api/wms/modeling/materialType'
import { mapGetters } from 'vuex'
import RemoveButton from '@/components/JLink/RemoveButton'
export default {
  name: 'Index',
  computed: {
    ...mapGetters([
      'userId', 'userName'
    ])
  },
  components: { RemoveButton }, // 组件注册
  data() {
    return {
      pageData: {
        // id: 0,
        code: undefined,
        neme: undefined,
        model: undefined,
        typeId: undefined,
        unit: undefined,
        // reasonable: true,
        pageNum: 1,
        pageSize: 15,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      addData: {
        id: '--',
        code: '--',
        name: '--',
        model: '--',
        typeId: '--',
        type: '--',
        unit: '--',
        salePrice: '--',
        costPrice: '--',
        introduction: '--',
        picUrl: '--',
        picName: '--'
      },
      mainId: 'id',
      pageName: '物料建模',
      tableHeight: '0',
      tableData: [],
      // productTypeOptions: [
      //   { id: '1', typeName: '软件' },
      //   { id: '2', typeName: '硬件' }
      // ],
      isEdit: false, // false:右侧区域仅为展示,true:右侧区域可编辑
      removeClick: false // 是否点了删除按钮
    }
  },
  watch: {
    'addData.fileName'() {
      if (this.addData.fileName) { this.addData.picUrl = this.addData.fileName }
    },
    'pageData.name'() {
      if (this.pageData.name == '' || this.pageData.name == null) {
        this.getList()
      }
    },
    'pageData.typeId'() {
      if (this.pageData.typeId == '' || this.pageData.typeId == null) {
        this.getList()
      }
    },
    'pageData.model'() {
      if (this.pageData.model == '' || this.pageData.model == null) {
        this.getList()
      }
    },
    'pageData.salePrice'() {
      if (this.pageData.salePrice == '' || this.pageData.salePrice == null) {
        this.getList()
      }
    }
  },
  mounted() {
    // this.getMaterialType()
    this.$nextTick(() => {
      this.tableHeight = this.$refs.middle_container.offsetHeight
    })
  },
  methods: {
    rowClick(row, column, event) { // 单击行选中
      this.getInfo(row)
    },
    getList() { // 获取数据
      this.pageData.pageNum = 1
      this.tableData = []
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
    },
    loadNext($state) { // 加载下一页数据
      list(this.pageData).then(res => {
        if (res.data.length > 0) {
          this.tableData = this.tableData.concat(res.data)
          this.pageData.pageNum++
          $state.loaded()
        } else {
          $state.complete()
        }
      })
    },
    add() { // 新增按钮
      this.$refs.table.setCurrentRow(-1)// 清除高亮
      Object.keys(this.addData).forEach(key => { // 清空右边数据
        this.addData[key] = undefined
      })
      // this.addData.isActive = '1'
      this.isEdit = true // 右边输入框显示出来
    },
    edit() { // 编辑按钮
      if (this.addData[this.mainId] == '--') {
        this.$message({
          message: '请先选择要操作的数据',
          type: 'warning'
        })
      } else {
        this.isEdit = true // 右边输入框显示出来
      }
    },
    checkForm() {
      if (!this.addData.code) {
        this.$message({
          message: '请输入产品编码',
          type: 'warning'
        })
        return false
      }
      if (!this.addData.name) {
        this.$message({
          message: '请输入产品名称',
          type: 'warning'
        })
        return false
      }
      if (!this.addData.typeId) {
        this.$message({
          message: '请选择产品型号',
          type: 'warning'
        })
        return false
      }
      return true
    },
    save() { // 保存按钮
      if (this.checkForm()) {
        const cacheData = JSON.parse(JSON.stringify(this.addData))
        cacheData.picUrl = this.addData.fileName
        if (!this.addData[this.mainId]) { // 新增
          add(cacheData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            Object.keys(this.addData).forEach(key => { // 清空右边数据
              this.addData[key] = undefined
            })
            this.getList()
          })
        } else { // 编辑
          edit(cacheData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getList()
          })
        }
      }
    },
    // 当前页的删除接口
    doRemove(data) {
      Object.keys(this.addData).forEach(key => { // 给右边数据赋值
        this.addData[key] = '--'
      })
      this.isEdit = false // 右边输入框隐藏
      return remove(data)
    },
    getInfo(row) { // 获取右侧数据
      getInfo(row[this.mainId]).then(res => {
        Object.keys(this.addData).forEach(key => { // 给右边数据赋值
          this.addData[key] = res.data[key] || undefined
        })
      })
      this.isEdit = false // 右边输入框隐藏
    },
    remoteMethod1(value) { // 选择框
      if (!value) {
        this.materialOptions = []
        return
      }
      list({ materialCode: value, materialName: value }).then(res => {
        this.materialOptions = res.data
      })
    },
    // remoteMethod2(value) { // 选择框
    //   if (!value) {
    //     this.userOptions = []
    //     return
    //   }
    //   list2({ userName: value }).then(res => {
    //     this.userOptions = res.data
    //   })
    // },
    // getMaterialType() { // 获取数据
    //   list2().then(res => {
    //     this.productTypeOptions = res.data
    //   })
    // },
    exportAll(data) {
      return list(data)
    }
  }
}
</script>

<style lang="less" scoped>
.main-container{
  .left_container{
    .button_container{
      .el-button{
        width: 25%;
      }
    }
  }
  .right_container{
    .img_container{
      width: 100%;
      height: 300px;
      border-bottom: 2px solid #999999;
      display: flex;justify-content: center;align-items: center;
      font-size: 30px;
    }
    .button_container{
      .el-button{
        width: 100%;
      }
    }
  }

}
</style>
